﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>

        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div>
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal" id="btn-expand">全部展开</button>
                    <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                    <button class="layui-btn" id="btn-addMenu"><i class="layui-icon">&#xe654;</i>添加菜单组</button>
                </div>

                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
            </div>
        </div>
    </div>

    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['iconPickerFa', 'table', 'treetable', 'layer', 'form'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;
            var layer = layui.layer;
            var iconPickerFa = layui.iconPickerFa;
            var form = layui.form;

            //添加下级时接收当前这级的ID
            var pid;

            //弹出框的index
            var index;

            //用来判断是添加还是修改
            var OperaStatus;

            // 渲染表格
            function RenderTree() {
                //数据加载时显示加载动画
                layer.load(2);

                treetable.render({
                    treeColIndex: 1,
                    treeSpid: -1,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    elem: '#munu-table',
                    url: '../../api/menus/GetMenuList',
                    page: false,
                    cols: [[
                        { type: 'numbers', align: 'center', title: '序号' },
                        { field: 'title', minWidth: 200, title: '菜单名称' },
                        { field: 'icon', width: 100, align: 'center', templet: function (d) { return '<i class="' + d.icon + '"></i>'; }, title: '菜单图标' },
                        { field: 'href', align: 'center', title: '菜单url' },
                        { field: 'sort', width: 80, align: 'center', title: '排序' },
                        {
                            width: 80, align: 'center', templet: function (d) {
                                if (d.isLogo) {
                                    return '<span class="layui-badge layui-bg-blue">Logo</span>';
                                }
                                else if (d.isHome) {
                                    return '<span class="layui-badge layui-bg-green">首页</span>';
                                }
                                else if (!d.isLogo && !d.isHome && d.pid == -1) {
                                    return '<span class="layui-badge layui-bg-orange">菜单组</span>';
                                }
                                else {
                                    return '<span class="layui-badge layui-bg-cyan">菜单</span>';
                                }
                            }, title: '类型'
                        },
                        {
                            templet: function (d) {
                                if (d.isHome || d.isLogo) {
                                    return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="HLedit">修改</a>';
                                }
                                else {
                                    return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加下级</a><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> 删除</a>';
                                }
                            }, width: 180, title: '操作'
                        }
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });

            };

            //页面初始化加载treeTable
            layer.ready(RenderTree());


            $('#btn-expand').click(function () {
                treetable.expandAll('#munu-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#munu-table');
            });

            //添加菜单组
            $('#btn-addMenu').click(function () {
                OperaStatus = '添加菜单组';

                $("input[name='Title']").val('');
                iconPickerFa.checkIcon('iconPicker', '');
                $("input[name='Href']").val('');
                $("input[name='Sort']").val('');

                index = layer.open({
                    title: '添加菜单组',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['30%', '50%'],
                    resize: true,
                    content: $("#editNode")
                });
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'del') {
                    layer.confirm('删除后不可恢复，您确定删除吗？', {
                        icon: 3,
                        title: ['温馨提示：', 'font-size:15px;background:#4baff5'],
                        btn: ['确定', '取消'] //按钮
                    }, function (index) {
                        $.ajax({
                            url: "/api/menus/delete",
                            type: "post",
                            accepts: "application/x-www-form-urlencoded",
                            dataType: "json",
                            contentType: "application/x-www-form-urlencoded",
                            data: { "id": data.id },
                            success: function (result) {

                                if (result.code != 0) {
                                    layer.msg(result.msg, { icon: 5, anim: 6 });
                                }
                                else {
                                    layer.msg('删除成功', { icon: 6, anim: 2, time: 1000 }, function () {
                                        RenderTree();//刷新树表格
                                    });
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.close(index);
                                layer.alert("error：" + error + "<br>" + "status：" + status + "<br>" + "xhr：" + xhr, { icon: 2, anim: 6 });
                            }
                        });

                        layer.close(index);
                    }, function () {

                    });
                } else if (layEvent === 'edit') {
                    OperaStatus = '修改';

                    $("input[name='Title']").val(data.title);
                    iconPickerFa.checkIcon('iconPicker', data.icon.substring(3));
                    $("input[name='Href']").val(data.href);
                    $("input[name='Sort']").val(data.sort);

                    pid = data.id;
                    index = layer.open({
                        title: '【' + data.title + '】菜单修改',
                        type: 1,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['30%', '50%'],
                        resize: true,
                        content: $("#editNode")
                    });

                } else if (layEvent === 'add') {
                    OperaStatus = '添加';

                    $("input[name='Title']").val('');
                    iconPickerFa.checkIcon('iconPicker', '');
                    $("input[name='Href']").val('');
                    $("input[name='Sort']").val('');

                    pid = data.id;
                    index = layer.open({
                        title: '【' + data.title + '】添加下级菜单',
                        type: 1,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['30%', '50%'],
                        resize: true,
                        content: $("#editNode")
                    });
                }
                else if (layEvent === 'HLedit') {
                    OperaStatus = '修改';

                    $("input[name='Title']").val(data.title);
                    iconPickerFa.checkIcon('iconPicker', data.icon.substring(3));
                    $("input[name='Href']").val(data.href);
                    $("input[name='Sort']").val(data.sort);

                    pid = data.id;
                    index = layer.open({
                        title: '【' + ((data.isHome)?"首页":"Logo") + '】修改',
                        type: 1,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['30%', '50%'],
                        resize: true,
                        content: $("#editNode")
                    });
                }
            });

            //icon图标选择器
            iconPickerFa.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // fa 图标接口
                url: "../../lib/font-awesome-4.7.0/less/variables.less",
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12
                // 点击回调
                //click: function (data) {
                //    console.log(data);
                //},
                // 渲染成功后的回调
                //success: function (d) {
                //    console.log(d);
                //}
            });


            //监听提交
            form.on('submit(saveBtn)', function (data) {
                data.field.Icon = 'fa ' + data.field.Icon;

                if (OperaStatus == "添加" || OperaStatus == "添加菜单组") {

                    data.field["Pid"] = (OperaStatus == "添加")?pid:"-1";

                    $.ajax({
                        url: "/api/menus/add",
                        type: "post",
                        accepts: "application/x-www-form-urlencoded",
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        data: data.field,
                        success: function (result) {

                            if (result.code != 0) {
                                layer.msg(result.msg, { icon: 5, anim: 6 });
                            }
                            else {
                                layer.msg('添加成功', { icon: 6, anim: 2, time: 1000 }, function () {
                                    RenderTree();//刷新树表格
                                    layer.close(index);
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.close(index);
                            layer.alert("error：" + error + "<br>" + "status：" + status + "<br>" + "xhr：" + xhr, { icon: 2, anim: 6 });
                        }
                    });

                }

                if (OperaStatus == "修改") {
                    data.field["Id"] = pid;

                    $.ajax({
                        url: "/api/menus/update",
                        type: "post",
                        accepts: "application/x-www-form-urlencoded",
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        data: data.field,
                        success: function (result) {

                            if (result.code != 0) {
                                layer.msg(result.msg, { icon: 5, anim: 6 });
                            }
                            else {
                                layer.msg('修改成功', { icon: 6, anim: 2, time: 1000 }, function () {
                                    RenderTree();//刷新树表格
                                    layer.close(index);
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.close(index);
                            layer.alert("error：" + error + "<br>" + "status：" + status + "<br>" + "xhr：" + xhr, { icon: 2, anim: 6 });
                        }
                    });

                }
                
                return false;
            });


        });
    </script>

    <div class="layui-row hide" id="editNode" style="margin-top:30px">
        <div class="layui-col-md10">
            <div class="layui-form layuimini-form ">
                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Title" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">菜单图标：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Icon" id="iconPicker" lay-filter="iconPicker" class="hide">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单URL：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Href" placeholder="请输入菜单URL" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序：</label>
                    <div class="layui-input-block">
                        <input type="number" name="Sort" placeholder="请输入排序号" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>